<script setup lang="ts">
import { ApiMemberInterestConfig } from '@/apis';
import BaseRichArea from '@/components/BaseRichArea.vue';
import Main from './vault/components/Main.vue';
import Tabs from './vault/components/Tabs.vue';
const { t } = useI18n()
const router = useRouter()

const tabsList = [
  { title: '存款', value: 0 },
  { title: '取款', value: 1 },
]
const tabsActive = ref(0)

const { data: interestConfig, runAsync: runAsyncInterestConfig } = useRequest(ApiMemberInterestConfig, {
  debounceInterval: 1000,
  debounceOptions: {
    leading: true,
    trailing: false,
  },
})
/** 当前币种配置利息 */
const vaultFig = computed(() => {
  return interestConfig.value ? interestConfig.value.rate : { interest_rate: 0, min_deposit: 0 }
})
const rate = computed(() => interestConfig.value?.rate)
const rule = computed(() => interestConfig.value?.rule)
const detailTitle = computed(() => {
  if (rule.value) {
    return rule.value.detail.split(/[\r\n]+/).map((item) => {
      const detail = { title: item.split('：')[0].trim(), content: item.split('：')[1] }
      console.log(detail)
      return detail
    })
  }
  return null
})

onMounted(() => {
  runAsyncInterestConfig({ cur: '701' })
})
</script>

<template>
  <div>
    <div>
      <Tabs v-model:active="tabsActive" :list="tabsList"
        :style="{ '--tabs-width': '50%', '--tabs-indicator-position': `${tabsActive * 100}%` }" />
      <Main detailPage :tabsActive="tabsActive" />
    </div>
    <div class="px-4">
      <div class="border-t-1 border-[#3A4142] mb-3"></div>
      <div class="text-center text-3xl mb-8">利息宝规则</div>
      <div>
        <div class="flex flex-wrap text-center mb-6">
          <div class="w-[25%] font-semibold">币种</div>
          <div class="w-[25%] font-semibold">最低存入金额</div>
          <div class="w-[25%] font-semibold">结算周期</div>
          <div class="w-[25%] font-semibold">年利率</div>
        </div>
        <div class="flex flex-wrap items-center text-center h-16 bg-[#323738] rounded-[6px]">
          <div class="w-[25%] font-bold">BRL</div>
          <div class="w-[25%] font-bold">100.00</div>
          <div class="w-[25%] font-bold">1小时</div>
          <div class="w-[25%] font-bold">14%</div>
        </div>
      </div>
      <div v-if="rule && rule.detail.length && rate" class="pb-6 mt-4 @md:pb-0">
        <BaseRichArea v-if="+rule.rule_type === 2" :content="rule.detail" />
        <template v-else>
          <div v-for="item of detailTitle" :key="item.title"
            class="rate-value-rule flex flex-col mb-4 items-start justify-start text-[#B3BEC1]">
            <div class="theme-describe-title mb-2 mt-1 text-xl font-semibold ">
              {{ item.title }}
            </div>
            <ul class="list-disc pl-4">
              <li class=" w-full font-medium ">
                {{ item.content }}
              </li>
            </ul>
          </div>
        </template>
      </div>
    </div>

  </div>
</template>
